<template>
	<view>
		<view class="person-page">
			<view class="person-img">
				<view>头      像</view>
				<image :src="info.headimgurl" mode="" @click="updataImg"></image>
			</view>
			<view class="person-name">
				<view>个人昵称</view>
				<view class="person-name-input">
					<input type="text" v-model="info.nickname" />
					<image :src="imglink + 'member/management_icon_textdelete.png'" mode="" @click="clearInput"></image>
				</view>
			</view>
			<view class="save-msg" @click="saveBtn">
				保存
			</view>
		</view>
		<!-- 保存成功 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				修改成功
			</view>
		</view>
	</view>
</template>

<script>
	import {uploadFile} from '@/common/alioss.js'
	export default{
		data(){
			return{
				imglink: this.$store.state.imgLink,
				info:{
					nickname:'',
					headimgurl:'',
				},
				saveState:false,
				store_id:''
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
		},
		onShow() {
			if(uni.getStorageSync('token')!="") {
				try {
					const res = uni.getStorageSync('userInfo');
					if (res) {
						this.info.nickname = res.nickname
						this.info.headimgurl = res.headimgurl
					}
				} catch (e) {
					this.info.nickname = this.$store.state.nickname
					this.info.headimgurl = this.$store.state.avatarUrl
				}
			}
		},
		methods:{
			clearInput(){
				this.info.nickname = ''
			},
			updataImg(){
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						// if (!/\.(gif|jpg|jpeg|png|bmp)$/.test(chooseImageRes.tempFiles[0].name)) {
						// 	uni.showToast({
						// 		title:'图片类型必须为gif/jpg/jpeg/png/bmp',
						// 		icon:'none',
						// 		duration:2000
						// 	})
						// 	return false;
						// }
						console.log('dddddddddd', chooseImageRes)
						uni.getImageInfo({
							src: chooseImageRes.tempFilePaths[0],
							success: (image) => {
								uni.showLoading({
									title: '图片上传中'
								})
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res, 'ddddddddddddd')
									this.info.headimgurl = res.data.url
									// this.$store.commit('updataUserInfo',this.info)
									uni.hideLoading()
								}).catch(err => {
									console.log(err)
								})
							}
						});
				    }
				});
			},
			saveBtn(){
				let data = {
					token:this.$store.getters.getToken,
					customer_id:uni.getStorageSync('customer_id'),
					headimgurl:this.info.headimgurl,
					nickname:this.info.nickname
				}
				this.$api.edit_user_msg(data).then(res => {
					console.log(res)
					if(res.status){
						uni.setStorageSync('userInfo',this.info)
						this.$store.commit('updataUserInfo',this.info)
						this.saveState = true
						setTimeout(()=> {
							this.saveState = false
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				}).catch( err => {
					console.log(err)
				})
				
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.person-page{
		width: 100%;
		background: #FFFFFF;
		padding-left: 30upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.person-img{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 10upx 30upx 10upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.person-img>view{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
		letter-spacing: 22upx;
	}
	.person-img>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.person-name{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.person-name>view:first-child{color: #666666;font-size: 28upx;}
	.person-name-input{
		display: flex;
	}
	.person-name-input>input{
		color: #333333;
		font-size: 28upx;
		text-align: right;
	}
	.person-name-input>image{
		width: 30upx;
		height: 30upx;
		margin-left: 22upx;
		margin-top: 6upx;
	}
	.save-msg{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		margin: 0 auto;
		margin-top: 90upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
</style>
